import React, { useState } from 'react';
import TextEmotionAnalyzer from './components/TextEmotionAnalyzer';
import BackgroundGenerator from './components/BackgroundGenerator';
import './App.css';

function App() {
  const [userText, setUserText] = useState('');
  const [emotion, setEmotion] = useState('');
  const [backgroundImage, setBackgroundImage] = useState('');
  const [loading, setLoading] = useState(false);

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50">
      <header className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
          <h1 className="text-3xl font-bold text-gray-900">InkMood</h1>
          <p className="mt-1 text-gray-600">让文字的情绪化作背景的色彩</p>
        </div>
      </header>
      <main>
        <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
          <div className="px-4 py-6 sm:px-0">
            <div className="bg-white rounded-lg shadow-lg p-6">
              <TextEmotionAnalyzer
                onTextChange={setUserText}
                onEmotionAnalyze={setEmotion}
                loading={loading}
                setLoading={setLoading}
              />

              {emotion && (
                <BackgroundGenerator
                  text={userText}
                  emotion={emotion}
                  onImageGenerate={setBackgroundImage}
                  loading={loading}
                  setLoading={setLoading}
                />
              )}

              {backgroundImage && (
                <div className="mt-8">
                  <h2 className="text-xl font-semibold mb-4">生成的背景</h2>
                  <div className="border-2 border-dashed border-gray-300 rounded-lg p-4">
                    <img
                      src={backgroundImage}
                      alt={`基于"${userText}"情绪生成的背景`}
                      className="w-full h-auto rounded-lg"
                    />
                    <div className="mt-4 flex justify-center">
                      <button
                        onClick={() => {
                          const link = document.createElement('a');
                          link.href = backgroundImage;
                          link.download = `inkmood-${Date.now()}.png`;
                          link.click();
                        }}
                        className="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition"
                      >
                        下载背景图片
                      </button>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

export default App;